<template>
  <el-form-item :label="name" class="IkFormNumber" :required="getRequire">
    <el-tooltip :disabled="tips==='' || tips===null || tips===undefined" class="item" effect="dark" :content="tips" placement="top">
      <el-input-number
        v-model="val"
        type="text"
        :disabled="disabled"
        :precision="precision"
        :min="min"
        :max="max"
        :step="step"
        @input="input"
      />
    </el-tooltip>
    <el-tooltip v-if="errorSign" class="right" effect="dark" :content="message" placement="top">
      <div>
        <i class="el-icon-warning" style="color:red;" />
      </div>
    </el-tooltip>
  </el-form-item>
</template>

<script>
import { verify } from '@/utils/ik/verify/verify.js'
export default {
  name: 'IkFormNumber',
  model: {
    // 属性
    prop: 'value',
    // 事件
    event: 'input'
  },
  props: {
    code: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    value: {
      type: Number,
      default: 0
    },
    edit: {
      type: Boolean,
      default: true
    },
    defaultValue: {
      type: Number,
      default: 0
    },
    precision: {
      type: Number,
      default: 2
    },
    step: {
      type: Number,
      default: 1
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100000
    },
    disabled: {
      type: Boolean,
      default: false
    },
    tips: {
      type: String,
      default: ''
    },
    require: {
      type: Boolean,
      default: false
    },
    rules: {
      type: Array,
      default: function() {
        return [
        ]
      }
    }
  },
  data() {
    return {
      val: 0,
      errorSign: false,
      message: ''
    }
  },
  computed: {
    getRequire() {
      return this.require
    }
  },
  watch: {
    value: {
      handler(value, oldValue) {
        if (value !== null && value !== '' && value !== undefined) {
          this.val = Number(value)
        } else {
          this.val = Number(this.defaultValue)
        }
        this.input(this.val)
      },
      immediate: true
    }
  },
  // 如果value为空，取默认值
  created() {
    this.input(this.value)
  },
  methods: {
    input(value) {
      // 取值验证
      this.message = verify(value, this.rules)
      if (this.message !== null) {
        this.errorSign = true
      } else {
        this.errorSign = false
      }
      // 空值验证
      if (this.getRequire && this.isNull()) {
        this.errorSign = true
        this.message = "必填项，不可为空"
      }
      this.$emit('onFieldChange', this.code, '', value, this.errorSign, this.message)
      // v-model实现触发方法
      this.$emit('input', value)
    },
    isNull() {
      return this.val === '' || this.val === null || this.val === undefined
    },
    reset() {
      this.val = this.defaultValue
    },
    clean() {
      this.val = 0
    }
  }
}
</script>

<style lang="scss" scoped>

::v-deep.IkFormNumber{

.el-form-item {
  margin-bottom: 12px;
  width: 100%;
}
.el-input-number {
  width: 100%;
}
.el-form-item__label {
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-form-item__content {
  width: calc(100% - 180px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
}
.IkFormNumber .el-input-number.item{width:calc(100% - 30px)}
</style>
